<template>
  <el-table :data="this.tableData" style="width: 100%" max-height="850">
    <el-table-column label="日期" width="200">
      <template slot-scope="scope">
        <span>
          {{ scope.row.time }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="" width="150">
      <template slot-scope="scope">
        <span>
          {{ scope.row.feedback }}
        </span>
      </template>
    </el-table-column>

    <el-table-column label="反馈信息" width="900">
      <template slot-scope="scope">
        <span>
          {{ scope.row.content }}
        </span>
      </template>
    </el-table-column>

    <el-table-column label="状态" width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.state === 1">已完成</span>
        <span v-else>未完成</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getList } from '@/api/guanli'
export default {
  data() {
    return {
      tableData: [
      ]
    }
  },
  async mounted() {
    this.getList()
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    handleClick(row) {
      console.log(row.state);
    },
    async getList() {

      const res = await getList()
      console.log(res);
      console.log('--------------------------');
      this.tableData = res.data.data
    }
  },
  async fetchData() {
      try {
        const response = await getList();
        // 假设response.data是包含status的对象数组，且status对象中有id字段
        this.tableData = response.data.data.map(item => {
          // 根据status.id判断状态
          const statusText = item.state.id === 1 || item.state.id === 2 ? '已完成' : '未完成';
          // 确保item对象中包含我们想要显示的状态文本
          return {
            ...item,
            displayStatus: statusText, // 添加或覆盖displayStatus属性以供模板使用
          };
        });
      } catch (error) {
        console.error('获取数据时出错:', error);
        // 错误处理逻辑
      }
    },
    
  }

</script>